<div class="cart-page">
<div class="uk-container uk-container-center cart">
  <app-cart-header></app-cart-header>
  <div *ngIf="carts.totalNumber === 0" class="cart-empty">
    <div class="grid grid-collapse">
      <div class="width-1-3">
        <div class="no-cart-img">
          <img src="/assets/img/no-login-icon.png" alt="">
        </div>
      </div>
      <div class="width-2-3">
        <ul class="uk-list">
          <li class="uk-margin-top">购物车内暂时没有商品，登录后将显示您之前加入的商品</li>
          <li class="uk-margin-top btn">
            <button class="uk-button uk-button-danger"
                    routerLink="/login">登录</button>
           </li>
          <li class="uk-margin-top">
            <img src="/assets/img/act-20170618.png" alt="">
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="cart-goods" *ngIf="carts.totalNumber > 0">
    <div class="no-login-tip">
      <i class="iconfont">&#xe614;</i>
      <span>您还没有登录！登录后购物车的商品将保存到您账号中</span>
      <button [routerLink]="['/login']">立即登录</button>
    </div>
    <div class="cart-title">
      <div class="cart-left-title">
        <h3>全部商品</h3>
        <span>{{carts.totalNumber}}</span>
      </div>
      <div class="distribution">
        <span>配送至：</span>
        <span class="detail-address">北京朝阳区官庄</span>
      </div>
    </div>
    <div class="grid grid-collapse cart-thead">
      <div class="width-2-10">
        <input type="checkbox" [(ngModel)]="carts.allS" (click)="onSelectedAll()">
        <label for="">全选</label>
      </div>
      <div class="width-4-10">
        <p>商品</p>
      </div>
      <div class="width-1-10">
        <p>单价</p>
      </div>
      <div class="width-1-10">
        <p>数量</p>
      </div>
      <div class="width-1-10">
        <p>小计</p>
      </div>
      <div class="width-1-10">
        <p>操作</p>
      </div>
    </div>
    <div class="shop">
      <div class="cart-checkbox">
        <input type="checkbox" />
        <label for="">京东自营</label>
      </div>
      <span class="free-carriage">已免运费</span>
    </div>
    <div class="item-list">
      <div class="grid grid-collapse uk-margin-top uk-margin-bottom item-header">
        <div class="width-5-6 change-buy-left">
          <span class="change-buy">换购</span>
          <span>购满1件，即可享受换购优惠</span>
          <a class="at-once-buy">立即换购 <i class="iconfont">&#xe61e;</i></a>
        </div>
        <div class="width-1-6">
          <span>¥{{carts.totalPrice}}</span>
        </div>
      </div>
      <div class="cart-detail-list" *ngFor="let product of carts.cart; let i = index; let f = first; let l = last">
      <div class="grid grid-collapse uk-margin-bottom" [ngClass]="{'first':f,'last':l}">
        <div class="width-2-10">
          <div class="cart-item-checkbox">
            <input type="checkbox"
                   (click)="changeSelected(product, product.productIsSelected)"
                   [(ngModel)]="product.productIsSelected" />
          </div>
          <a href="" class="goods-img"  [routerLink]="['/goods-detail']">
            <img src="{{product.image}}" alt="">
          </a>
        </div>
        <div class="width-4-10 uk-margin-top">
          <div class="grid grid-large">
            <div class="width-1-2">
              <a class="goods-name" [routerLink]="['/goods-detail']">
                {{product.name}}
              </a>
            </div>
              <div class="width-1-2">
                <div class="goods-desc">
                  <p>颜色：红</p>
                  <p>尺码：123</p>
                </div>
              </div>
            </div>
        </div>
        <div class="width-1-10 uk-margin-top item-price">
          <p>¥{{product.price}}</p>
          <a>更多促销
            <i class="iconfont">&#xe851;</i>
          </a>
        </div>
        <div class="width-1-10 uk-margin-top">
          <div class="item-quantity">
            <a  class="minus" (click)="minus(product.quantity,product.goodsId)">-</a>
            <input type="number" [(ngModel)]="product.quantity"
                   (change)="quantityChanged(product.quantity,product.goodsId)" />
            <a  class="plus" (click)="plus(product.quantity,product.goodsId)">+</a>
          </div>
          <p>有货</p>
        </div>
        <div class="width-1-10 uk-margin-top goods-total-price">
          <div>¥{{product.price * product.quantity}}</div>
          <p>3.34KG</p>
        </div>
        <div class="width-1-10 uk-margin-top caozuo">
          <a (click)="delete(product.goodsId)">删除</a>
          <a href="">移到我的关注</a>
          <a href="">加到我的关注</a>
        </div>
      </div>
        <div class="line"> </div>
      </div>
    </div>
    <div class="uk-margin-top jiesuan">
      <div class="grid grid-collapse">
        <div class="width-3-5 jiesuan-left">
          <input type="checkbox" [(ngModel)]="carts.allS" (click)="onSelectedAll()">
          <label for="">全选</label>
          <a href="">删除选中的商品</a>
          <a href="">移到我的关注</a>
          <a href="">清除下柜商品</a>
        </div>
        <div class="width-2-5">
          <div class="grid grid-collapse">
            <div class="width-7-10">
              <span class="choose">已选择 <em> {{carts.selectedTotalNumber}} </em> 件商品 <i class="iconfont">&#xe66c;</i></span>
              <span>总价：<em>¥ {{carts.selectedTotalPrice}}</em></span>
              <span> <img src="/assets/img/price-tips.png" alt="99999" title="不含运费及送装服务费"></span>
              <p>已节省：<span>¥ -23</span></p>
            </div>
            <div class="width-3-10">
              <div class="submit-btn">
                <button class="uk-button uk-button-danger"
                        [routerLink]="['/login']">
                去结算
              </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</div>

